<template>
  <div class="Row_content">
    <Form ref="formValidate"
      :model="formValidate"
      :rules="ruleValidate"
      :label-width="120">
      <FormItem label="服务商名称:"
        prop="serviceName">
        <Select v-model="formValidate.serviceName"
          style="width:280px"
          @on-change="serviceNameChange">
          <Option v-for="item in serviceNames"
            :value="item.value"
            :key="item.value">
            {{ item.label }}
          </Option>
        </Select>
      </FormItem>
      <FormItem label="服务商类型:"
        prop="serviceType">
        <Select v-model="formValidate.serviceType"
          style="width:280px" disabled>
          <Option v-for="item in serviceTypeLists"
            :value="item.value"
            :key="item.value">
            {{ item.label }}
          </Option>
        </Select>
      </FormItem>
      <FormItem label="备注:"
        prop="remark">
        <Input v-model="formValidate.remark"
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 8 }"
          :maxlength="100"
          placeholder="请描述"
          @on-keyup="filterSpace"
          class="Row_content_input"></Input>
        <span class="rol_tipsd">
          {{ formValidate.remark.length }}/100
        </span>
      </FormItem>
      <FormItem class="form-btn"
        style="margin-top: 5px;">
        <Button type="primary"
          class="system-submit-btn"
          @click="handleSubmit">确定</Button>
        <Button class="system-submit-btn"
          @click="handleReset"
          style="margin-left: 8px">取消</Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
import { routeEqual } from '@/libs/util'
import serviceMixins from '../mixins/serviceType'
import { mapState } from 'vuex'
import { addService, updateService, getServiceDetail } from '@/api/pay/service.js'
export default {
  name: 'payment_service_create',
  mixins: [serviceMixins],
  data () {
    return {
      id: '',
      formValidate: {
        serviceName: '',
        serviceType: '',
        remark: ''
      },
      ruleValidate: {
        serviceName: [
          { required: true, message: '服务商名称不能为空', trigger: 'blur' }
        ],
        serviceType: [
          { required: true, message: '服务商类型不能为空' }
        ]
      }
    }
  },
  mounted () {
    this.getDetail()
  },
  computed: {
    ...mapState({
      merchantId: state => state.user.merchantId
    })
  },
  methods: {
    filterSpace () {
      this.formValidate.remark = this.formValidate.remark.replace(/\s+/g, '')
    },
    getDetail () {
      this.id = this.$route.params.id
      if (this.id) {
        getServiceDetail({
          merchantId: this.merchantId,
          paymentProviderId: this.id
        }).then(res => {
          const result = res.data || {}
          if (result.status === 200) {
            const form = result.data || {}
            this.formValidate = {
              serviceName: form.providerName,
              serviceType: form.providerType + '',
              remark: form.remark
            }
          } else {
            this.$Message.error(`${result.error}`)
          }
        }).catch(err => {
          this.$Message.error(`${err}`)
        })
      }
    },
    handleSubmit () {
      this.$refs.formValidate.validate(val => {
        if (val) {
          const formValidate = this.formValidate
          const params = {
            providerName: formValidate.serviceName,
            providerType: +formValidate.serviceType,
            remark: formValidate.remark,
            merchantId: this.merchantId
          }
          let request
          if (this.id) {
            request = updateService({ ...params, paymentProviderId: this.id })
          } else {
            request = addService(params)
          }
          request.then(res => {
            const result = res.data || {}
            if (result.status === 200) {
              this.$Message.success(this.id ? '编辑成功！' : '新增成功！')
              this.handleReset()
            } else {
              this.$Message.error(`${result.error}`)
            }
          }).catch(err => {
            this.$Message.error(`${err}`)
          })
        }
      })
    },
    handleReset () {
      this.$store.commit('closeTag', this.$route)
      this.$store.commit('setTagNavList', this.$store.state.app.tagNavList.filter(item => !routeEqual(this.$route, item)))
      this.$nextTick(() => {
        this.$router.push({
          name: 'payment_service_list'
        })
      })
    },
    serviceNameChange (val) {
      const formValidate = this.formValidate
      if (val === '招商银行') {
        formValidate.serviceType = '2'
      } else {
        formValidate.serviceType = '1'
      }
    }
  }
}
</script>

<style lang="less">
.rol_tipsd {
  display: inline-block;
  width: 100%;
  text-align: right;
  font-size: 12px;
  line-height: 14px;
  color: #c5c8ce;
}
</style>
